﻿<!doctype html>
<html>
<head>
<script src="jquery/jquery.js"></script>
<link href="css/css.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no" />
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.move_box{ width:100%; clear:both; position:relative; left:0; overflow:hidden}
.move{ width:200%; clear:both; position:relative; left:0; }
/*服务流程or订单详情*/
.information,.evaluate{ height:41px; width:50%; line-height:41px; color:#65646b; text-align:center; float:left; font-size:14px;}
.blue_block{ width:50%; height:2px; background-color:#01aff0; position:absolute; left:0; bottom:0;}
/*服务流程*/
.service_box{  background-color:#fff; position:relative; width:50%; float:left}
.blue{ width:14px; height:14px; position:absolute; z-index:2; left:4%; top:20px; background-color:#a5dcfa; border-radius:50%; padding-top:2px; padding-left:2px; box-sizing:border-box}
.blue div{ height:10px; width:10px; background-color:#01aff0; border-radius:50%;}
.gray{ width:14px; height:14px; position:absolute; z-index:0; left:4%; top:20px; padding-top:1px; padding-left:1px; box-sizing:border-box}
.gray div{ height:12px; width:12px; background-color:#ccc; border-radius:50%;}
.gray p{ position:absolute; width:2px; height:59px; background-color:#ccc; left:50%; margin-left:-1px; top:-50px;}
.blue p{ position:absolute; width:2px; height:50px; background-color:#ccc; left:50%; margin-left:-1px; top:-50px;}
.service{ height:60px; padding-top:11px; box-sizing:border-box; position:relative; box-sizing:border-box; background:#fff;}
.service h1{ line-height:18px; color:#191919; font-size:14px; margin-left:11%;}
.service h2{ line-height:16px; color:#65646b; font-size:12px; margin-left:11%}
.service > p{ line-height:42px; color:#65646b; font-size:12px; position:absolute; top:0; right:4%;}
/*订单详情*/
.order_box{ width:50%; float:left}
.order_title{ height:39px; line-height:39px; font-size:14px; color:#65646b; padding-left:4%; box-sizing:border-box}
.order{ height:42px; background-color:#fff; position:relative; padding-left:4%; padding-right:4%; padding-top:9px; box-sizing:border-box}
.order_line{ height:26px;}
.order_line h1{ line-height:26px; font-size:14px; color:#191919; float:left}
.order_line p{ line-height:26px; font-size:14px; color:#EA5858; float:right}
/*订单信息*/
.order_msg{ background-color:#fff; position:relative; padding-left:4%; padding-right:4%; padding-top:9px; padding-bottom:9px; box-sizing:border-box}
.msg_line h1{ line-height:26px; font-size:14px; color:#65646b; float:left; width:20%;}
.msg_line p{ line-height:26px; font-size:14px; color:#191919; float:left; width:78%;}
/*底部按钮*/
.evaluate_btn,.share_btn{ background-color:#FF7F00; color:white; border-radius:3px; width:44%; height:33px; line-height:33px; text-align:center; font-size:16px; margin-left:4%;margin-top:14px; float:left}
.share_btn{ background-color:#fff; border:1px solid #ccc; color:#65646b;}
/*分享框*/
.black{ z-index:3}
.share_box{ width:100%; height:126px; background-color:#fff; position:fixed; left:0; bottom:0; z-index:4}
.share_title{ position:relative; height:41px; line-height:41px; color:#65646b; text-align:center; font-size:14px;}
.share_title img{ width:9px; height:9px; position:absolute; left:4%; top:14px;}
.share,.share1{ width:50%; float:left}
.share img,.share1 img{margin-top:15px; width:33px; height:auto}
.share img{float:right; margin-right:22%;}
.share1 img{float:left; margin-left:22%;}
.share p,.share1 p{ position:relative; bottom:0; font-size:12px; color:#65646b; line-height:36px;}
.share p{ clear:right; text-align:right; right:22%; margin-right:-5px;}
.share1 p{ clear:left; text-align:left; left:22%; margin-left:-2px;}
/*取消规则*/
.cancel_box{ z-index:4}
.cancel_title{ line-height:33px; height:33px; color:#01aff0; border-bottom:1px solid #01aff0; padding-left:14px;}
.cancel_text{ padding-left:14px; padding-right:14px; margin-top:4px; height:224px;}
.cancel_text h1{ font-size:14px; line-height:18px; color:#01aff0;}
.cancel_text p{ font-size:12px; line-height:15px; color:#65646b;}
.cancel{ height:24px;}
.cancel p{ float:left; line-height:24px; color:#191919; font-size:12px; margin-left:14px;}
.cancel input{ float:right; margin-right:14px; margin-top:5px;}
</style>
</head>

<body style="background-color: #f9f9f9;">
<!--header顶部标题-->
<div class="header">订单详情
	<div class="header_left" onclick="window.history.go(-1)"><img src="images/return.png"></div>
</div>
<!--阿姨信息-->
<div class="waiter_box" onclick="document.location='waiter_details?id={{$res->id}}';">
	<div class="border_top"></div>
	<div class="waiter_img"><img src=""></div>
    <div class="waiter">
    	<h1 onclick="document.location='waiter_details';">{{$res->name}}</h1>
        <h2>服务评价：
        	<div class="star_box" style=" position:absolute; top:0; right:-85px; margin-top:0">
                @for($i = 0 ; $i < $res->service; $i++)
                    <img src="images/star.png">
                @endfor
                @if($res->service ==4)
                    @for($y = 0; $y <1 ; $y++)
                        <img src="images/star_gray.png">
                    @endfor
                @elseif($res->service ==3)
                    @for($y = 0; $y <2 ; $y++)
                        <img src="images/star_gray.png">
                    @endfor
                @endif
            </div>
        </h2>
        <p>接单数：{{$res->orders}}单</p>
    </div>
    <p class="waiter_id">工号：{{$res->workers}}</p>
    <div class="border_bottom"></div>
</div>
<!--服务流程or订单详情-->
<div style="position:relative; height:42px;">
    <div class="information" style="color:#01aff0">服务流程</div>

    <div class="blue_block"></div>
    <div class="border_bottom"></div>
</div>
<!--服务流程-->
<div class="move_box">
<div class="move">
<div class="service_box">
    <!--服务流程（上）-->
    <div class="service">
        @if($row->state==2)
    	<div class="blue">
        @else
        <div class="gray">
        @endif
    		<div></div>
    	</div>
            <h1>服务结束</h1>
            <h2>阿姨已服务结束</h2>
            <p>{{$row->over_time}}</p>
    </div>
    <!--服务流程（中）-->
{{--    <div class="service">
    	<div class="gray">
       	  	<div></div>
            <p></p>
      	</div>
        <h1>阿姨已上门</h1>
        <h2>阿姨已开始服务</h2>
        <p>2015-12-30&nbsp;&nbsp;&nbsp;&nbsp;16:30:25</p>
    </div>
    <!--服务流程（中）-->
    <div class="service">
    	<div class="blue">
       	  	<div></div>
            <p></p>
      	</div>
        <h1>阿姨已出发</h1>
        <h2>阿姨已前往你的住处</h2>
        <p>2015-12-30&nbsp;&nbsp;&nbsp;&nbsp;16:30:25</p>
    </div>--}}
    <!--服务流程（下）-->
    <div class="service">
        @if($row->state==1)
    	<div class="blue">
       		<div></div>
            <p></p>
      	</div>
        @else
        <div class="gray">
            <div></div>
            <p></p>
        </div>
        @endif
        <h1>已支付</h1>
        <h2>等待阿姨上门服务</h2>
        <p>{{$row->payment_time}}</p>
    </div>
    <div class="border_bottom"></div>
</div>

    <!--底部按钮-->
    <div class="confirm_box">
    <div class="evaluate_btn" onclick="document.location='evaluate?id={{$res->id}}';">评价</div>
{{--    <div class="share_btn">分享</div>--}}
    </div>
    <!--点击分享按钮，弹出分享框-->
   {{-- <div class="black"></div>
    <div class="share_box">
    <div class="share_title">分享给好友
    <img src="images/close_share.png" class="close_share">
    <div class="border_bottom"></div>
    </div>
    <div class="share">
    <img src="images/weixin3.png">
    <p>微信好友</p>
    </div>
    <div class="share1">
    <img src="images/friend.png">
    <p style="text-align:left;">朋友圈</p>
    </div>
    </div>--}}
    <!--取消规则-->
    <div class="cancel_box">
    <div class="cancel_head">取消规则
    <img src="images/close.png" class="close">
    <div class="border_bottom"></div>
    </div>
    <div class="cancel_title">取消规则</div>
    <div class="cancel_text">
    <h1>1.优惠券的获得？</h1>
<p>优惠券的获得？优惠券的获得？优惠券的获得？优惠券的获得？</p>
</div>
<div class="cancel_title">取消原因</div>
    <div class="cancel">
    <p>个人原因</p>
    <input type="radio" name="reason">
    </div>
    <div class="cancel">
    <p>个人原因</p>
    <input type="radio" name="reason">
    </div>
    <div class="cancel">
    <p>个人原因</p>
    <input type="radio" name="reason">
    </div>
    <div class="confirm" style=" height:26px; line-height:26px; font-size:12px; margin-top:10px;">确定</div>
    </div>
    <script>
/*    //点击服务流程，蓝色滑块向左移动，切换到服务流程页
    $(".information").click(
        function(){
            $(".blue_block").animate({left:'0%'});
            $(".move").animate({left:'0%'});
        }
    )
//点击订单详情，蓝色滑块向右移动，切换到订单详情页
$(".evaluate").click(
    function(){
        $(".blue_block").animate({left:'50%'});
        $(".move").animate({left:'-100%'});
    }
)*/
//隐藏黑色半透明背景和分享页
$(".black").hide();
$(".share_box").hide();
//点击分享按钮，弹出分享页
$(".share_btn").click(
	function(){
		$(".black").show();
		$(".share_box").show();
		}
)
//点击分享页左上角的关闭按钮
$(".close_share").click(
	function(){
		$(".black").hide();
		$(".share_box").hide();
		}
)
//隐藏取消规则
$(".cancel_box").hide();
</script>
</body>
</html>

